<template>
  <div>
    <h2 class="title">平均分统计</h2>
    <chart :options="options" :height="250" />
  </div>
</template>

<script>
// import * as echarts from 'echarts'

function getChartOptions (data1, data2, name) {
  var legendData = ['班级平均分', name + '的平均分'] // 图例

  var indicator = Object.keys(data1).map(item => ({
    text: item,
    max: 120
  }))
  var dataArr = [{
    value: Object.values(data1),
    name: legendData[0],
    itemStyle: {
      normal: {
        lineStyle: {
          color: '#4A99FF'
        // shadowColor: '#4A99FF',
        // shadowBlur: 10,
        },
        shadowColor: '#4A99FF',
        shadowBlur: 10
      }
    },
    areaStyle: {
      normal: { // 单项区域填充样式
        color: {
          type: 'linear',
          x: 0, // 右
          y: 0, // 下
          x2: 1, // 左
          y2: 1, // 上
          colorStops: [{
            offset: 0,
            color: '#4A99FF'
          }, {
            offset: 0.5,
            color: 'rgba(0,0,0,0)'
          }, {
            offset: 1,
            color: '#4A99FF'
          }],
          globalCoord: false
        },
        opacity: 1 // 区域透明度
      }
    }
  },
  {
    value: Object.values(data2),
    name: legendData[1],
    itemStyle: {
      normal: {
        lineStyle: {
          color: '#4BFFFC'
        // shadowColor: '#4BFFFC',
        // shadowBlur: 10,
        },
        shadowColor: '#4BFFFC',
        shadowBlur: 10
      }
    },
    areaStyle: {
      normal: { // 单项区域填充样式
        color: {
          type: 'linear',
          x: 0, // 右
          y: 0, // 下
          x2: 1, // 左
          y2: 1, // 上
          colorStops: [{
            offset: 0,
            color: '#4BFFFC'
          }, {
            offset: 0.5,
            color: 'rgba(0,0,0,0)'
          }, {
            offset: 1,
            color: '#4BFFFC'
          }],
          globalCoord: false
        },
        opacity: 1 // 区域透明度
      }
    }
  }
  ]
  var colorArr = ['#4A99FF', '#4BFFFC'] // 颜色
  const options = {
    color: colorArr,
    radar: {
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      indicator: indicator,
      splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: { // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        }
      },
      axisLine: { // 指向外圈文本的分隔线样式
        lineStyle: {
          color: '#153269'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#113865', // 分隔线颜色
          width: 1 // 分隔线线宽
        }
      }
    },
    series: [{
      type: 'radar',
      symbolSize: 8,
      // symbol: 'angle',
      data: dataArr
    }]
  }
  return options
}

export default {
  name: 'radar-chart',
  props: ['student'],
  data () {
    return {
      options: {}
    }
  },
  watch: {
    student () {
      this.initData()
    }
  },
  mounted () {
    setTimeout(() => {
      this.initData()
    }, 500)
  },
  methods: {
    initData () {
      const data = this.$db.select('achievement')
      data.onsuccess = (res) => {
        const time = []
        const scoreData = res.target.result.reduce((prev, item, index) => {
          const score = item.score
          if (prev[item.student]) {
            for (const key in score) {
              const value = score[key]
              prev[item.student].score[key] = prev[item.student].score[key] * 1 + value * 1
            }
          } else {
            prev[item.student] = {
              score: score
            }
          }
          if (!time.includes(item.create_time)) {
            time.push(item.create_time)
          }
          return prev
        }, {})
        console.log(scoreData, 'aaaaaaa')
        let data1 = {}
        let data2 = []
        for (const key in scoreData) {
          const value = scoreData[key].score
          for (const subject in value) {
            value[subject] = value[subject] / time.length
          }
          data2.push({
            text: key,
            score: value
          })
          if (key === this.student) {
            data1 = value
          }
        }
        console.log(Object.keys(scoreData).length, '总')
        data2 = data2.reduce((prev, item, index) => {
          if (Object.keys(prev).length < 1) {
            prev = { ...item.score }
          } else {
            const score = item.score
            for (const key in score) {
              prev[key] += score[key]
              if (index === data2.length - 1) {
                prev[key] = prev[key] / Object.keys(scoreData).length
              }
            }
          }
          return prev
        }, {})
        console.log(data1, data2, 'aaa')
        this.options = getChartOptions(data1, data2, this.student)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 50px;
  text-align: center;
}
</style>
